iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 29
2
Modern Web

前端常見問題攻略系列 第 29

VSCode 套件推薦系列

  • 分享至 

  • xImage
  •  

身為一名工程師,將文字編輯器打造出具個人風格也是理所當然的。VSCode 是現在主流的文字編輯器,也因為使用者相當多,沒有特別打理的情況不乏會有撞衫的情況:

「你也是用 VSCode 喔」
「我也是耶...」(不知怎麼往下接)

為了避免尷尬情境,並且突顯自己的高尚,將 VSCode 安裝一堆套件,讓它每次展示就像一款從未現身於世面的工具;在社群中將不會有撞衫感,更能顯示自身的獨特品味!

錯誤:「你的 VSCode 怎麼有彩虹線條?」
正確:「天啊,你的程式碼怎麼沒有彩虹線條?」

Better Comment

註解都灰灰的看不清楚嗎?

https://ithelp.ithome.com.tw/upload/images/20201014/20083608XYl8SkSDYH.png

Better Comment 能夠將你的註解加入不同的色彩,並且可以依據不同的關鍵詞進行 Highlight,讓註解的說明更容易被辨識。

注意:實戰中過多的 TODO 代表不重要。

套件網址:https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

私心推薦:⭐⭐⭐

Bracket Pair Colorizer

每次都找不到大小括號的結尾在哪嗎?

Bracket Pair Colorizer 協助大中小括號({}[]())一一的獨立補上不同色彩,讓你在撰寫程式碼時可以專注在邏輯處理上,不必為了尋找結尾而耗去大量精力。

https://ithelp.ithome.com.tw/upload/images/20201014/2008360870pVHict4c.png

如果安裝此套件還是找不到結尾,可能是你的程式碼真的太亂惹。
套件網址:https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

私心推薦:⭐⭐⭐⭐

indent-rainbow

找不到大小括號就算了,連 103 行與 127 行的縮排也都對不上!

在撰寫 HTML 時,良好的縮排是好的習慣,不過隨著結構越複雜的情況下,常常會對不上不同行數的縮排。indent-rainbow 為 VSCode 的縮排補上彩虹般的色彩,讓你可以輕鬆地用顏色進行配對。

https://ithelp.ithome.com.tw/upload/images/20201014/20083608igwXrcctXx.png

HTML 縮排還不可怕,使用縮排進行結尾的工具或語言才可怕(pug, python, coffeescript...)

套件網址:https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

私心推薦:⭐⭐⭐⭐

Prettier

對於程式碼整齊有強迫症,每次都要耗去許多時間嗎?

Prettier 可透過熱鍵的方式,針對整個檔案進行重新排版,讓你不需要自己手動一一對齊,甚至有機會找到你失散已久的結尾喔 :D

調整前
調整後

不過有時候,你必須把它關掉自己手動對齊(眼神死)

套件網址:https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

私心推薦:⭐⭐⭐⭐

Import Cost

身為一個專業的開發者,應該要能精確的掌握外部資源的大小。

Import Cost 可以計算 @importrequire 的外部資源尺寸,包含原始尺寸及 Gzip 均有提供。

https://ithelp.ithome.com.tw/upload/images/20201014/20083608GdCeSwfvE2.png

別只注意到你的 JS 尺寸,結果頁面中隨便一張圖就比原始碼大

套件網址:https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

私心推薦:⭐⭐⭐

VSCode 中文化

沒中文就是看不懂辣~

VSCode 為國際知名大廠微軟大大所開發,因此包含各種語系檔案也是理所當然的,而語系檔案並非直接附加在 VSCode 上,需要另外透過套件的形式另行安裝。

https://ithelp.ithome.com.tw/upload/images/20201014/20083608mog5plwXDP.png

安裝教學:https://wcc723.github.io/development/2019/12/01/vscode-chinese/

套件網址:https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hant

私心推薦:⭐⭐⭐⭐

更多的套件於下篇持續介紹!


上一篇
VSCode 註解就是你的文件
下一篇
VSCode 套件推薦系列 - 下
系列文
前端常見問題攻略30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言